<template>
    <div>
        <p v-for="(item, index) in list"  :key="index">{{ item.body}}</p>
    </div>
</template>

<script>
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
import axios from 'axios'

export default {
    props: {
        modelState: Number,
    },
    setup (props) {
        const { modelState } = props
        console.log(modelState)
        // msg相关
        const msg = ref('modelButton')

        // listArray相关
        const { listArray } = list1()

        // list相关
        let { list } = getData()
        console.log(list)
        return { msg, listArray, list }
    }
}

// 数组相关
function list1 () {
    const data =reactive({
        listArray: [1,2,3,3,2,3,5,7,5432,24,25332,23432]
    })
    return toRefs(data)
}


function getData() {
    let data = reactive({
        list:[]
    })

    onMounted(() => {
        axios.get('http://localhost:8888/test').then(({data: {success, result}}) => {
            if(success) {
                data.list = result
            }
        })
    })

    return toRefs(data)
}
</script>

<style scoped>

</style>